<template>
    <div class="learning">
        <div class="img-div">
            <img class="bg-img" src="../assets/img/learn-bg.png" alt="">
            <div class="i-body">
                <div class="body-head">
                    <router-link tag="div" to="/personal" class="head">
                        <img src="../assets/img/logo.png" alt="">
                    </router-link>
                    <div class="head-text">{{user.wordRepoName}}</div>
                    <router-link tag="div" to="/list" class="head-book">
                        <img src="../assets/img/book.png" alt="">
                        <p>换词书</p>
                    </router-link>
                </div>
                <div class="range-img">
                    <vue-circle v-if="pro" :progress="pro" :size="isIpad?400:200" :reverse="false" line-cap="round" :fill="fill" empty-fill="#a3f4a9" :animation-start-value="0.0" :start-angle="2.5" insert-mode="append" :thickness="15" :show-percent="false" @vue-circle-progress="progress" @vue-circle-end="progress_end">
                        <p>
                            <span>已通{{user.learnedWordUnitCount}}关</span><br> 共{{user.wordUnitCount}}关
                        </p>
                    </vue-circle>
                </div>
            </div>
        </div>
        <div class="range">
            <div class="r-head">
                <img src="../assets/img/range.png" alt="">
                <span>单词进度</span>
            </div>
            <div class="r-detail">
                <div class="r-rest">
                    <div class="r-num">{{user.wordCount-user.learnWordCount}}</div>
                    <div class="r-lable">剩余词数</div>
                </div>
                <div class="r-all">
                    <div class="r-num">{{user.wordCount}}</div>
                    <div class="r-lable">总共词数</div>
                </div>
            </div>
            <router-link tag="div" :to="{path:'/level',query:{id:user.wordRepoId}}" class="r-btn">继续学习</router-link>
        </div>
        <audio src="../assets/1.wav"></audio>
    </div>
</template>
<script>
import VueCircle from 'vue2-circle-progress'
import io from 'api/io'
import util from 'util'
export default {
    name: 'learning',
    components: {
        VueCircle
    },
    data() {
        return {
            fill: { gradient: ["#ffe403", "#ffaf02"] },
            user: {},
            pro: 0,
            isIpad:util.isIpad()
        }
    },
    created() {
        this.getUserStatistics()
    },
    async beforeRouteEnter(to, from, next) {
        try {
            let { data } = await io.post(io.userStuStatus)
            if (data.success) {
                if (!data.data) {
                    next('/list')
                } else {
                    next()
                }
            }
        } catch (err) {
            next('/list')
        }

    },
    methods: {
        async getUserStatistics() {
            let { data } = await io.post(io.getUserStatistics)
            if (data.success) {
                this.user = data.data
                if (this.user.wordRepoName && this.user.wordRepoName.length > 20) {
                    this.user.wordRepoName = this.user.wordRepoName.substr(0, 20) + '...'
                }
                this.pro = (this.user.learnedWordUnitCount / this.user.wordUnitCount) * 100
                console.log(this.pro)
            }
        },
        progress(event, progress, stepValue) {
            // console.log(stepValue);
        },
        progress_end(event) {
            // console.log("Circle progress end");
        }
    }
}
</script>
<style lang="stylus" scoped>
.learning
    background #f4fff4
    min-height 100%
    position relative
    .img-div
        position relative
        .bg-img
            width 100%
            height auto
        .i-body
            position absolute
            top 10px
            left 0
            width 100%
            .range-img 
                display flex
                align-items center
                justify-content center
                p
                    margin 0
                    font-size 15px
                    color white
                    text-align center
                    span
                        font-size 28px
            .body-head
                display flex
                height 60px
                align-items center
                .head
                    width 80px
                    height 30px
                    display flex
                    justify-content center
                    img 
                        width 30px
                        height 30px
                        border-radius 50%
                        overflow hidden
                .head-text
                    flex 1
                    text-align center
                    font-size 16px
                    word-break break-all
                .head-book
                    width 80px
                    display flex
                    flex-direction column
                    justify-content center
                    align-items center
                    font-size 12px
                    color white
                    img 
                        width 21px
                        height 23px
                        display block
                    p
                        margin 0
    .range
        height 240px
        margin 0 15px
        background white
        box-shadow 2px 2px 10px 0px rgba(7, 57, 7, 0.2)
        border-radius 6px
        position relative
        top -45px
        .r-head
            display flex
            align-items center
            height 45px
            font-size 15px
            img 
                height 20px
                width auto
                margin 0 15px 0 20px
        .r-detail
            display flex
            align-items center
            justify-content center
            margin-top 50px
            div
                flex 1
                display flex
                align-items center
                justify-content center
                flex-direction column
                .r-num
                    font-size 24px
                    font-weight bold
                .r-lable
                    font-size 15px
                    color #666
            .r-rest
                .r-num
                    color #ffa800
            .r-all
                .r-num
                    color #9ad213
    .r-btn
        width 80%
        margin-left 10%
        margin-top 20px
        height 42px
        background-image linear-gradient(180deg, #99f164 0%, #77de6b 37%, #54cb72 74%,#4eb667 100%)
        border-radius 21px
        display flex
        align-items center
        justify-content center
        color #fefefe
        font-size 18px
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
    .body-head
        height 120px !important
    .head
        height 60px !important
        width 160px !important
        img 
            height 60px !important
            width 60px !important
    .head-book
        font-size 24px !important
        width 160px !important
        img
            height 46px !important
            width 42px !important
    .head-text
        font-size 32px !important
        color #ffffff
    .range-img
        p
            font-size 30px !important
            span
                font-size 56px !important
    .learning
        .range
            top auto !important
            height 300px !important
            position absolute
            bottom 30px !important
            width 94%
            margin 0 3%
            .r-head
                height 90px !important
                font-size 30px !important
                img
                    height 40px !important
            .r-detail
                margin-top 20px !important
                .r-num
                    font-size 28px !important
                .r-lable
                    font-size 30px !important
        .r-btn
            height 60px !important
            border-radius 30px !important
            font-size 32px !important
</style>


